<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!-- The HTML 4.01 Transitional DOCTYPE declaration-->
<!-- above set at the top of the file will set     -->
<!-- the browser's rendering engine into           -->
<!-- "Quirks Mode". Replacing this declaration     -->
<!-- with a "Standards Mode" doctype is supported, -->
<!-- but may lead to some differences in layout.   -->

<html>
  <head>
    <title>Doodle Poster Store</title>
    <link href="/css/style.css" media="all" rel="stylesheet" type="text/css"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"></meta>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
    google.load('payments', '1.0', {
      'packages': ['sandbox_config']
    });
	
	var success = function(data){
	  goog.payments.inapp.buy({
	      jwt: data,
	      success: function(success) {console.log(success);  window.alert("success")},
	      failure: function(error) {console.log(error); window.alert("failure")}
	  });
	  return false;
	};
	
	function purchase(item) {
      $.post("jwt", "item=" + item, success);
    }
    </script>
  </head>
  <body>
    <h1>Doodle Poster Store</h1>
    <table>
    <tr valign="top">
      <td>
      <ul>
        <li>
          <img src="images/drivein12.jpg" />
          <button class="buy-button" type="button" onClick="purchase('Item1');">Purchase</button>
        </li>
        <li>
          <img src="images/golden_gate.jpg" />
       	  <button class="buy-button" type="button" onClick="purchase('Item2');">Purchase</button>
        </li>
      </ul>
      </td>
    </tr>
    </table>
  </body>
</html>